<template>
  <!-- <el-alert :closable="false">
      <router-view />
  </el-alert>-->
  <div style="padding:30px;width:60%">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="115px"
      class="demo-ruleForm"
    >
      <el-form-item label="公司名称" prop="name">
        <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="公司负责人" prop="person">
        <el-input v-model="ruleForm.person" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话" prop="telephone">
        <el-input v-model="ruleForm.telephone" autocomplete="off"></el-input>
      </el-form-item>

      <!-- <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="ruleForm.createTime"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import { getToken, gettype, getid } from "@/utils/auth";
import request from "@/utils/request";
import moment from "moment";
import { MessageBox, Message } from "element-ui";
import { host } from "@/config";

export default {
  name: "contractlist",
  data() {
    // 手机号校验
       var checkphone = (rule, value, callback) => {
		      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
		      if (value == "") {
		        callback(new Error("请输入手机号"));
		      } else if (!this.isCellPhone(value)) {//引入methods中封装的检查手机格式的方法
		        callback(new Error("请输入正确的手机号!"));
		      } else {
		        callback();
		      }
		    };
    return {
      host: host,
      info: null,
      getid,
      getToken,
      ruleForm: {
        // conNumber: null,
        // conText: null,
        // telephone: null,
        // cheMoney: null,
        // signTime: null,
        // finishTime: null,
        // advReceived: null,
        // executeTime: null,
        // rate: null,
        // amount: null
      },
      formLabelWidth: "80px",
      rules: {
          name: [
            { required: true, message: '请输入公司名称', trigger: 'blur' }
          ],
          person: [
            { required: true, message: '请输入公司负责人', trigger: 'blur' }
          ],
          telephone: [
              { required: true, validator: checkphone, trigger: "blur" },
          ]
        },
      value1: null,
      options1: [],
      value2: null,
      options2: [],
      value3: null,
      options3: [],
      value4: null,
      options4: [],
      fileList: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, //// {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
      ],
      fileListTmp: []
      
    };
  },
  created() {
    this.findInfo();
    setTimeout(() => {
      this.findCompnany();
    }, 500);
  },
  methods: {
    // 检查手机号
      isCellPhone(val) {
	      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
	        return false;
	      } else {
	        return true;
	      }
	    },
    findInfo() {
      let self = this;
      request("/person/rolelist", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(function(response) {
        self.info = response.data.object;
      });
    },
    findPerson(query) {
      let self = this;
      var resdata = {
        pid: this.value2,
        name: query
      };
      request("/person/selectComboBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        let list = response.data.object.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
        self.options3 = list;
        self.options4 = list;
      });
    },
    findBumen() {
      let self = this;
      var resdata = {
        bid: this.value1,
        page: this.pageIndex,
        pageSize: 1000
      };
      request("/department/selectComboBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        self.options2 = response.data.object;
        console.log("response", response);
      });
    },
    findCompnany() {
      let self = this;
      var resdata = {
        cid: self.info.cid,
        page: this.pageIndex,
        pageSize: 1000
      };
      request("/branch/select", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        self.options1 = response.data.object;
        // console.log(response.options1);
      });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.selectLoading = true;
        this.findPerson(query);
      } else {
        this.options = [];
      }
    },
    resetForm(formName) {
      this.value1 = null;
      this.value2 = null;
      this.value3 = null;
      this.value4 = null;
      this.$refs[formName].resetFields();
      // this.$refs.upload.clearFiles();
    },
    submitForm(formName) {
      let self = this;
      let resdata = this.ruleForm;
      console.log(resdata);

      this.$refs[formName].validate(valid => {
        if (valid) {
          request("/company/add", {
            method: "post",
            headers: {
              "Content-Type": "application/json"
            },
            data: resdata
          }).then(function(response) {
            console.log(response);
            //弹窗失败
            if (response.data.code == 1) {
              self.$message.success("添加成功");
            }
          });
        } else {
          console.log("添加失败");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      if (response.code == 1) {
        this.fileListTmp = fileList.map(item => {
          return item.response.object;
        });
      } else {
        Message({
          message: "上传失败",
          type: "error",
          duration: 2 * 1000
        });
      }
      // console.log("1", response);
      // console.log("2", file);
      // console.log("3", fileList);
    }
  }
};
</script>
